<template>
  <div>
     <!--------------------轮播-------------------------->
    <div  class="banner">
      <!-- <el-skeleton :rows="30" animated  v-if="banner<=0" style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 2; background: #fff;" /> -->
      <!-- <div v-for="(item, i) in banner" :key="i" :class="i == 0 ? 'item active' : 'item'">
        <a :href="item.link" target="_blank" v-if="item.link !=''">
          <img :src="item.imgurl"   />
        </a>
        <img src="../assets/static/02.png"   v-else />
      </div> -->
      <video autoplay="" loop="" preload="auto" muted="" id="top-video">
              <source src="../assets/static/mp4.mp4" type="video/mp4">
      </video>
      <div class="banner_but aniview" av-animation="bounce">
          <a :href="enginedownlinkList[0].link"  target="_blank"></a>
      </div>
    </div>
    <!---------------------end--------------------------->
    <div class="produc revealtop01">
      <div class="container">
         <el-carousel :interval="5000" arrow="always" height="120px" class="carousel" >
          <el-skeleton :rows="4" animated  v-if="adindex.length<=0" />
          <el-carousel-item v-for="(item, i) in adindex" :key="i" >
            <router-link target="_blank" :to="{ path: '/list', query: { id: item.id } }" v-if="item.link == '/list'">
                <img :src="item.url" />
              </router-link>
              <div style="height:100%" v-else>
                <a target="_block" :href="item.link" v-if="item.link != ''"><img :src="item.url" /></a>
                <img v-else :src="item.url" />
              </div>
          </el-carousel-item>
        </el-carousel>
        <!--------------------end---------------------------->
        <!-- 我们的产品和服务 -->
        <div class="area-row">
          <div class="area-row-h">我们的产品和服务</div>
              <ul class="server_hover_box area flex-between-center aniview" av-animation="shake">
                <li>
                    <p  class="icon-1">
 
                    </p>
                    <p  class="icon-2">GEE引擎</p>
                    <P class="icon-3">兼容GOM、BLUE、Hero等市面常用引擎</P>
                    <p class="icon-4"></p>
                </li>
                <li >
                    <p class="icon-1">
        
                    </p>
                    <p class="icon-2">功能插件</p>
                    <P class="icon-3">一键自动拾取<br>支持角色交易<br>实现怪物爆率透视</P>
                    <p class="icon-4"></p>
                </li>
                <li >
                    <p class="icon-1">
           
                    </p>
                    <p class="icon-2">游戏网关</p>
                    <P class="icon-3">多线程 更稳定 大服必备<br>基础封速功能</P>
                    <p class="icon-4"></p>
                </li>
                <li >
                    <p class="icon-1">
          
                    </p>
                    <p class="icon-2">蓝盾封挂</p>
                    <P class="icon-3">封杀微加速<br>杜绝一切游戏外挂<br>24小时客服在线技术支持</P>
                    <p class="icon-4"></p>
                </li>
              </ul>



        </div>

        <!---------------------end------------------------------->
      </div>
    </div>
    <!----------------------------------------------------->

    <!-- GEE引擎优势 -->
    <div class="produc  revealtop02">
      <div class="container">
        <div class="area-row">
          <div class="area-row-h">GEE游戏引擎优势</div>
          <ul >
              <li v-for="(item, i) in product" :key="i">
                    <div class="product-item aniview"  av-animation="tada">
                      <p class="product-item-title"> {{ item.title }}</p>
                      <p class="product-item-desc"> {{ item.simpleTxt }}</p>
                    </div>
              </li>
          </ul>
          
        </div>
      </div>
    </div>
    <!----------------------end----------------------------->

    <!-- 新闻动态 -->
    <div class="produc revealtop03">
      <div class="container">
       <div class="area-row">
        <div class="area-row-h">新闻动态</div>
        <div class="flex-between-center aniview" av-animation="bounceInDown">
            <div class="exampl-l"></div>
            <div class="exampl-r">
                 <div class="product-exampl" v-for="(item, i) in news" :key="i">
                  <router-link target="_blank" :to="{ path: '/details', query: { id: item.id } }">
                    <div class="product-exampl-title">
                      {{ item.title }}
                    </div>
                    <div class="product-exampl-desc" v-html="item.simpleTxt "></div>
                    <div class="product-exampl-time">
                       <span>{{ item.addTime }}</span>
                       <i class="el-icon-arrow-right"></i>
                    </div>
                   
                  </router-link>
                </div>
            </div>
        </div>
         
        </div>
      </div>
    </div>
    <!----------------------end----------------------------->

    <Contact />
    <!----------------------end----------------------------->
  </div>
</template>

<script>
import Contact from '../components/contact.vue'

import api from '@/api/index'
export default {
  name: 'index',
  components: {
    Contact
  },

  data () {
    return {
      enginedownlinkList: [{link:''}],
      server_hover_index: 0,
      index: 1,
      bartime: null,
      geeindex: 0,
      atv: 0,
      banner: '',
      contactList: '',
      journalismList: '',
      productServiceList: '',
      showpartnerList: [{ link: '' }, { link: '' }, { link: '' }],
      news: '',
      adindex: [],
      product: [
        {
          title: '正版授权',
          simpleTxt: '正版授权引擎,开服无忧。',
          id: 1,
        },
        {
          title: '免费稳定',
          simpleTxt:
            '提供全功能10人测试版,小伙伴玩服无需付费。提供正式版50人免费引擎,超过人数才需要购买网关。',
          id: 2,
        },
        {
          title: '扩展性强',
          simpleTxt:
            '支持市面各种引擎转换提供GOM引擎、leg引擎、hero引擎等市面常见引擎转换工具,并持续更新。',
          id: 3,
        },
        {
          title: '配套完善',
          simpleTxt:
            '致力为用户打通各个工具开区助手、微信验证、支付渠道等且持续更新。',
          id: 4,
        },
        {
          title: '宠物骑战',
          simpleTxt:
            '独家宠物坐骑系统,支持各种宠物攻击触发,更方便便捷的打造各种个性玩法。',
          id: 5,
        },
        {
          title: '兼容性高',
          simpleTxt: '兼容市面上各个引擎的脚本命令,脚本开发更方便更便捷。',
          id: 6,
        },
        {
          title: '完美封挂',
          simpleTxt:
            '官方研发蓝盾封挂网关,封杀市面一切外挂,持续为广大用户安全提供支撑。',
          id: 7,
        },
        {
          title: '插件支持',
          simpleTxt:
            '提供API接口更开放支持任何第三方自动研发插件,定制属于自己的专属功能',
          id: 8,
        },
        {
          title: '24小时客服技术支持',
          simpleTxt:
            '秉承客户至上服务第一的原则,提供7*24小时技术客服团队技术支持，全天专业技术为您在线答疑。',
          id: 9,
        }
      ],
      num: -1,
      productServiceListEngine: '',
      productServiceid: 0,
      productServiceListFeature1: '',
      productServiceListFeature2: '',
      productServiceListFeature3: '',
      productServiceListFeature4: ''
    }
  },

  mounted () {
 

    api.index().then(res => {
       this.banner = res.data.data.banner
      this.news = res.data.data.contentList
      this.enginedownlinkList=res.data.data.enginedownlinkList
      this.showpartnerList = res.data.data.showpartnerList

      var add = res.data.data.ad
      add.map(item => {
        if (item.position == 1) {
          this.adindex.push(item)
        }
      })

      this.productServiceList = res.data.data.productServiceList
      this.productServiceListEngine = res.data.data.productServiceList[0]
      let d = res.data.data.productServiceList
      this.productServiceListFeature4 = d[d.length - 1].child
    })

    api.purchasedetails({ purchaseId: 1 }).then(res => {
      this.productServiceListFeature1 = res.data.data.list
    })
    api.purchasedetails({ purchaseId: 2 }).then(res => {
      this.productServiceListFeature2 = res.data.data.list
    })
    api.purchasedetails({ purchaseId: 3 }).then(res => {
      this.productServiceListFeature3 = res.data.data.list
    })
    $(document).ready(function () {
      var i = {
        animateThreshold: 5
      }
      $('.aniview').AniView(i)
    })

    // this.list()
  },

  methods: {
   
  
    binggeeclick (i) {
      this.geeindex = i
    },
    match (val) {
      let str = val || ''
      let index = str.lastIndexOf(' ')
      str = str.substring(0, index)
      return str
      // return val.match(/(\S*) /)[1]
    },
    searchEngine (e, i) {
      this.engineType = e
      this.engineIndex = i
      this.name = ''
      this.list()
    },
    searchVersion (e, i) {
      this.versionType = e
      this.versionIndex = i
      this.name = ''
      this.list()
    },
    searchPurchase (e, i) {
      this.purchaseType = e
      this.purchaseIndex = i
      this.name = ''
      this.list()
    },
    searchName () {
      this.purchaseType = ''
      this.versionType = ''
      this.engineType = ''
      this.retIS = true
      this.list()
    },
    list () {
      api
        .list({
          limit: this.limit,
          page: this.page,
          engineType: this.engineType,
          versionType: this.versionType,
          purchaseType: this.purchaseType,
          name: this.name
        })
        .then(res => {
          this.tableData = res.data.data.list
          if (this.retIS) {
            this.retrieval = this.tableData.length
          }
        })
    },
    change (e) {
      this.$router.push({ path: '/details', query: { id: e } })
    },
    productService (i) {
      this.productServiceid = i
      this.atv = i
    }
  },

  beforeDestroy () {
  
  }
}
</script>

 

